<template>
  <div class="box">
    <!-- <img src="../assets/1.jpg" alt=""> -->
    <el-carousel :interval="4000" type="card">
      <!-- 循环获取到的接口数据 -->
      <el-carousel-item v-for="(item, index) in banners" :key="index">
        <img :src="item.imageUrl" alt="" />
      </el-carousel-item>
    </el-carousel>
    <h2>推荐歌单</h2>
    <!-- 循环获取到的接口数据 -->
    <div class="song-sheet">
      <ul>
        <li class="item" v-for="(item, index) in list" :key="index">
          <!-- <p><span>{{item.copywrite}}</span></p> -->
          <p>
            <img :src="item.picUrl" alt="" />
          </p>
          <span>{{ item.name }}</span>
        </li>
      </ul>
    </div>
    <h2>最新音乐</h2>
    <div class="new_music" v-for="(item, index) in songs" :key="'new_music'+index">
      <!-- 封面数据循环 -->
      <div class="cover">
        <img :src="item.picUrl" alt="" width="150px" height="150px;" />
        <div class="play" @click="playMusic(item.id)">
          <img src="../../Data/播放.png" alt="" width="50px" height="50px;" />
        </div>
      </div>

      <div class="name">
        <p class="singer">
          <span>{{ item.name }}</span>
        </p>
        <p>
          <span>{{ item.song.artists[0].name }}</span>
        </p>
      </div>
    </div>
    <h2>推荐MV</h2>
    <div class="mv" v-for="(item,index) in mvs" :key="'mv'+index">
      <div class="mv_img">
        <img :src="item.picUrl" alt="" width="150px" height="150px;"/>
      <div class="time"><span>{{item.playCount}}</span></div>
        <div class="mv_play">
          <img src="../../Data/播放.png" alt="" width="50px" height="50px;" />
        </div>
        </div>
      <div class="mv_name">
        <!-- mv名字 -->
        <p><span>{{ item.name }}</span></p>
        <p><span>{{ item.artistName }}</span></p>
      </div>
     </div>
  </div>
</template>
<script>
//导入接口api axios
import axios from "axios";
export default {
  data() {
    return {
      banners: [],
      //轮播图
      list: [],
      //推荐歌单
      songs: [],
      //最新音乐
      mvs: []
      //推荐Mv
    };
  },
  methods: {
    clickMe() {
      // alert("事实就是是")
      this.$message({
        message: "警告哦，这是一条警告消息",
        type: "warning",
      });
    },
    playMusic(id) {
      // console.log(id)
      axios({
        url: "https://autumnfish.cn/song/url",
        method: "get",
        params: {
          // id:id
          id,
        },
      }).then((res) => {
        // console.log(musicUrl)
        // console.log(res)
        let url = res.data.data[0].url;
        // 设置给父组件的播放地址
        this.$parent.musicUrl = url;
      });
    },
  },
  created() {
    //调用轮播图接口
    axios({
      url: "https://autumnfish.cn/banner",
      method: "get",
    }).then((res) => {
      console.log(res);
      this.banners = res.data.banners;
    });

    //推荐歌单
    axios({
      url: "https://autumnfish.cn/personalized",
      method: "get",
      params: {
        //获取的数据量
        limit: 8,
      },
    }).then((res) => {
      // console.log(res)
      this.list = res.data.result;
    });
    //最新音乐
    axios({
      url: "https://autumnfish.cn/personalized/newsong",
      method: "get",
    }).then((res) => {
      // console.log(res)
      this.songs = res.data.result;
    });
    //最新mv
    axios({
      url: "https://autumnfish.cn/personalized/mv",
      method: "get",
    }).then((res) => {
      // console.log(res)
      this.mvs = res.data.result;
    });

  },
};
</script>

<style>
.mv_img{
  position:relative;
  width: 25%;
}
.mv{
  width: 25%;
  float:left;
}
.mv .mv_play{
  display:none;
}
.mv:hover .mv_play{
  display:block;
}
.time{
  position:absolute;
  top:0;
  left:220%;
  font-size:14px;
  color:red;
}
.mv_play{
  position:absolute;
  top:40%;
  left:100%;
  z-index:2;
}
.box {
  width: 80%;
  padding: 0 10%;
  height: 600px;
  overflow: scroll;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}
.el-carousel__container img {
  width: 100%;
  height: 100%;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.song-sheet ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.song-sheet img {
  width: 80%;
}
.song-sheet ul li {
  text-align: center;
  width: 25%;
  margin-bottom: 5%;
}
h2 {
  padding-bottom: 5%;
}
.new_music {
  float: left;
  width: 50%;
}
.new_music .name,
.cover {
  float: left;
}
.cover {
  padding: 5%;
}
.name {
  margin-top: 15%;
}
.name .singer {
  font-size: 24px;
  font-weight: bold;
}
.singer{
  width: 200px;
}
.cover {
  position: relative;
}
.play {
  position: absolute;
  top: 40%;
  left: 40%;
  z-index: 10;
  display: inline;
}
.lib {
  position: absolute;
  top: 0;
  left: 0;
}
.cover .play {
  display: none;
}
.cover:hover .play {
  display: block;
}
</style>
